<template>
  <div class="page_body">
    <HomeTop :topTitle="topTitle"></HomeTop>

    <div class="page_list">
      <div class="page_top">
        <div class="seachBox">
          <van-search v-model="seachValue" placeholder="请输入搜索关键词" />
        </div>
        <div class="searchBtn" @click="search">搜索</div>
      </div>
      <div class="page_tab">
        <div
          :class="Index == '1' ? 'page_tab_tow' : 'page_tab_one'"
          @click="tab('1')"
        >
          教练员和领队
        </div>
        <div
          :class="Index == '2' ? 'page_tab_tow' : 'page_tab_one'"
          @click="tab('2')"
        >
          运动员
        </div>
        <div
          :class="Index == '3' ? 'page_tab_tow' : 'page_tab_one'"
          @click="tab('3')"
        >
          参赛队
        </div>
      </div>
      <div class="page_msg" v-if="list.length != 0">
        <div class="list_leader" v-for="(item, index) in list" :key="index">
          <img
            class="img"
            :src="item.photo"
            v-if="Index == 1 || Index == 2"
            alt=""
          />
          <!-- <img v-if="Index == 2" class="img" :src="item.photo" alt="" /> -->
          <img v-if="Index == 3" class="img" :src="item.image_path" alt="" />

          <div class="leader_intro">
            <div class="intro_title" v-if="Index == 1 || Index == 2">
              {{ item.name }}
            </div>
            <div class="intro_title" v-if="Index == 3">
              {{ item.team_name }}
            </div>

            <div class="intro_con_jia" v-if="Index == 1">
              创建球队:<img class="imgads" :src="item.image_path" alt="" />
              <div class="inte_p">{{ item.team_name }}</div>
            </div>
            <div class="intro_con" v-if="Index == 2">
              归属参赛队: {{ item.team_name }}
            </div>
            <div class="intro_title" v-if="Index == 3">
              队伍人数： {{ item.amount }}人
            </div>
          </div>
        </div>
      </div>
      <div class="listEmpty" v-else>
        <div class="emptyBox">
          <img class="empty_img" src="../../assets/image/xxss.png" alt="" />
          <div class="empty_title">输入内容进行搜索吧</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style src="../../assets/css/function/informationSearch.css" scoped></style>

<script>
import HomeTop from "@/components/homeTop.vue";
import { Search } from "vant";
import { Indicator, Toast } from "mint-ui";
export default {
  name: "dome",
  components: {
    HomeTop,
    [Search.name]: Search,
  },
  data() {
    return {
      topTitle: "信息搜索",
      seachValue: "", //搜索值
      Index: "1",
      list: [],
    };
  },

  methods: {
    tab(Index) {
      this.Index = Index;
      this.list = [];
      let url = "mobile/searchTeam";
      let data = {
        keywords: this.seachValue,
        type: this.Index,
      };
      this.axios
        .post(url, data)
        .then((res) => {
          if (res.code == 0) {
            this.list = res.list;
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          // console.log(error);
        });
    },
    //请求搜索按钮事件
    search() {
      let url = "mobile/searchTeam";
      let data = {
        keywords: this.seachValue,
        type: this.Index,
      };

      this.axios
        .post(url, data)
        .then((res) => {
          if (res.code == 0) {
            this.list = res.list;
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          // console.log(error);
        });
    },
  },
};
</script>
<style scoped>
.van-search {
  padding: 0 !important;
}
.van-search__content {
  background-color: #e3e4e6 !important;
  height: 0.76rem !important;
  line-height: 0.76rem !important;
}
.van-cell {
  line-height: 0.6rem;
}
/* .van-search__content{
    background-color: #fff;
} */
</style>
